<template>
  <view class="content">
    <loading v-if="showLoading"></loading>
    <view class="block">
      <view class="top-block">
        <view class="swiper-block">
          <swiper :indicator-dots="false" :autoplay="true" :circular="true" :interval="5000"
                  style="height: 580rpx;">
            <swiper-item v-for="(item, index) in swiperList" :key="item.id"
                         @click="bannerJump(item.jump,item.jumpPartnerId)">
              <image :src="cloudStorage+item.bannerUrl"></image>
            </swiper-item>
          </swiper>
        </view>
        <view class="search-block">
          <view class="input-block">
            <view class="input-left">
              <image
                  src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/search.png"
                  mode=""></image>
              <input placeholder="请输入关键字" v-model="businessName" @confirm="search" />
            </view>
            <view class="search" @click="search">搜索</view>
          </view>
        </view>
      </view>
      <view class="info-block">
        <view class="limite-block">
          <view class="title-item">
            <view class="title FangZhengHanZhenGuangBiaoJianTi">限时免费</view>
            <view class="more" @click="navigate('/page_other/activities/list')">更多<view
                class="iconfont icon-gengduo"></view>
            </view>
          </view>
          <view class="limite-item">
            <template v-if="limitList.length>0">
              <view class="limit-list" v-for="item in limitList" :key="item.id"
                    @click="navigate('/page_other/activity/activityDetail?id='+item.id+'&latitude='+latitude+'&longitude='+longitude+'&type=1')">
                <image :src="cloudStorage+item.cover" mode="scaleToFill" class="image"></image>
                <view class="name">{{item.activityName}}</view>
                <view class="price-item">
                  <view class="price">￥{{item.price}}</view>
                  <view class="preferential">￥{{item.preferential}}</view>
                </view>
              </view>
            </template>
            <view class="empty" v-else>暂无数据 </view>
          </view>
        </view>
        <view class="draw-item" @click="navigate('/page_other/shopping/raffle')">
          <image
              src="https://suzhou-charge-pile-1306862033.cos.ap-chengdu.myqcloud.com/uniapp/images/draw.png"
              class="notice-img" mode="widthFix" style="width: 100%;margin-top: 30rpx;"></image>
        </view>
        <view class="screen">
          <view class="all">
            <picker class="text" :range="industry" range-key="name" :value="industryIndex"
                    @change="bindIndustry">
              {{industry[industryIndex]['name']}}
            </picker>
            <image
                src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/screen.png">
            </image>
          </view>
          <view class="all">
            <view class="text" @click="screen(1)" :class="sort==1?'active':''">附近</view>
            <image
                src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/screen.png">
            </image>
          </view>
          <view class="all">
            <view class="text" @click="screen(2)" :class="sort==2?'active':''">智能排序</view>
            <image
                src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/screen.png">
            </image>
          </view>
        </view>
        <view class="shop-block">
          <view class="title FangZhengHanZhenGuangBiaoJianTi">消费多少送多少</view>
          <!-- <view class="notice-block">
            <image src="@/static/headlines.png" class="notice-img"></image>
            <view class="notice-item">

              <view class="text">消费多少送多少</view>
            </view>
          </view> -->

          <view class="shop-item">
            <ShopList :list="list"></ShopList>
          </view>
        </view>
      </view>
    </view>
    <Tabbar style="position: fixed; left: 0; bottom: 0"></Tabbar>
  </view>
</template>

<script>
import {
  getBusinessTypeList,
  getBannerList,
  getTranslateActivityList
} from '@/api/home.js';
import {
  getBusinessListApi,
  getUserBusinessListApi
} from '@/api/activities.js'
import Tabbar from '@/components/Tabbar/Tabbar';
import ShopList from '@/components/ShopList/ShopList';
import {
  getStorage,
  setStorage
} from '@/util/auth';
export default {
  components: {
    Tabbar,
    ShopList
  },
  data() {
    return {
      swiperList: [{
        id: 1,
        bannerUrl: '/file/40u1Pr9t.jpg'
      }],
      limitList: [],
      form: {
        isIndustry: '',
      },
      sort: 0,
      industryIndex: 0,
      industry: [],
      list: [],
      page: 1,
      limit: 100,
      businessName: '',
      latitude: '',
      longitude: ''
    }
  },
  onLoad() {
    uni.showCustomLoading();
    Promise.all([this.getBusinessTypeList(), this.getTranslateActivityList(), this.getBusinessList(), this
        .getBannerListMiddle()
    ]).finally(
        () => {
          uni.hideCustomLoading()
        })
  },
  methods: {
    //中间轮播图
    getBannerListMiddle() {
      return getBannerList({
        type: 3
      }).then((res) => {
        this.swiperList = res.list
      })
    },
    //获取商家类型
    getBusinessTypeList() {
      return getBusinessTypeList().then((res) => {
        let list = res || []
        var obj = {
          id: 0,
          name: '全部分类'
        }
        list.unshift(obj)
        this.industry = list
        this.menuList = list.filter(item => item.id !== 0);
      })
    },
    getBusinessList() {
      return getBusinessListApi({
        classification: 1,
        page: 1,
        limit: 3
      }).then((res) => {
        this.limitList = res.list
      })
    },
    bindIndustry(e) {
      this.industryIndex = e.detail.value;
      this.form.isIndustry = this.industry[this.industryIndex].id
      this.page = 1
      uni.showLoading({
        title: '加载中',
        mask: true
      })
      this.getTranslateActivityList(true)
    },
    screen(e) {
      this.sort = e
      this.page = 1
      uni.showLoading({
        title: '加载中',
        mask: true
      })
      this.getTranslateActivityList(true)
    },
    getTranslateActivityList() {
      const position = getStorage('position');
      uni.getLocation({
        success: (current) => {
          this.latitude = current.latitude;
          this.longitude = current.longitude;
          return getUserBusinessListApi({
            page: this.page,
            limit: this.limit,
            latitude: this.latitude,
            longitude: this.longitude,
            type: this.form.isIndustry,
            businessName: this.businessName,
            classification: 5,
            sort: this.sort
          }).then((res) => {
            this.list = res.list
            uni.hideLoading()
          })
        },
        fail: (e) => {
          this.showToast('获取位置失败，请重试！');
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  background-color: #f5f5f5;

  .block {
    .top-block {
      width: 100%;

      .swiper-block {
        position: absolute;
        width: 100%;
        height: 580rpx;
        border-radius: 20rpx;

        image {
          width: 100%;
          height: 100%;
          border-radius: 20rpx;

        }
      }

      .search-block {
        position: relative;
        width: 100%;
        height: 65rpx;
        display: flex;
        margin-bottom: 30rpx;
        padding-top: 490rpx;

        .input-block {
          display: flex;
          background-color: #FFFFFF;
          height: 70rpx;
          border-radius: 50px;
          align-items: center;
          justify-content: space-between;
          width: calc(100% - 60rpx);
          padding: 6rpx 6rpx 6rpx 20rpx;
          margin: 0 auto;

          .input-left {
            width: calc(100% - 140rpx);
            display: flex;

            image {
              width: 30rpx;
              height: 30rpx;
              margin: 7rpx 7rpx 0 0;
            }

            input {
              border-radius: 50px;
              width: 100%;
              font-size: 28rpx;
            }
          }

          .search {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 110rpx;
            border-radius: 50rpx;
            height: 100%;
            padding-bottom: 5rpx;
            color: #FFFFFF;
            background: linear-gradient(90deg, #FF2F34 0%, #FF6B18 100%);
            font-size: 28rpx;
          }
        }
      }
    }

    .info-block {
      padding: 30rpx;
      margin-top: 90rpx;

      .limite-block {
        background-color: #FFFFFF;
        padding: 30rpx;
        border-radius: 30rpx;

        .title-item {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .title {
            background: -webkit-linear-gradient(45deg, #FF2F34, #FF6B18);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            display: inline-block;
          }

          .more {
            display: flex;
            align-items: center;
            font-size: 26rpx;
            color: #767676;

            .iconfont {
              width: 30rpx;
              height: 30rpx;
              font-size: 16rpx;
              background-color: #EEEEEE;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-left: 10rpx;
            }
          }
        }

        .limite-item {
          display: flex;
          align-items: center;
          margin-top: 30rpx;

          .limit-list:nth-child(3n) {
            margin-right: 0;
          }

          .limit-list {
            width: calc((100% - 40rpx)/3);
            margin-right: 20rpx;

            .image {
              width: 200rpx;
              height: 200rpx;
              border-radius: 14rpx;
            }

            .name {
              font-size: 28rpx;
              margin-top: 8rpx;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .price-item {
              display: flex;
              align-items: center;
              margin-top: 8rpx;

              .price {
                color: #FF0014;
                font-weight: bold;
                font-size: 28rpx;
              }

              .preferential {
                color: #ccc9c9;
                font-size: 25rpx;
                margin-left: 6rpx;
                text-decoration: line-through;
              }
            }
          }
        }
      }

      .screen {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30rpx;
        margin-top: 30rpx;

        .all {
          display: flex;
          align-items: center;

          .text {
            font-size: 28rpx;
            color: #3D3D3D;
            margin-right: 10rpx;
          }

          .text.active {
            color: #FF2F34;
          }

          image {
            width: 30rpx;
            height: 30rpx;
          }
        }
      }

      .shop-block {
        margin-bottom: 160rpx;
        background-color: #FFFFFF;
        border-radius: 20rpx;

        .notice-block {
          border-radius: 15rpx;
          display: flex;
          align-items: center;
          background-color: #FFFFFF;
          margin-top: 20rpx;
          height: 110rpx;
          margin-bottom: 30rpx;

          .notice-img {
            width: 140rpx;
            height: 120rpx;
            padding: 0 20rpx;
          }

          .notice-item {
            width: calc(100% - 160rpx);
            display: flex;
            align-items: center;
            background-image: linear-gradient(to right, #FFFFFF, #FEF8F6);
            height: 80rpx;
            border-radius: 20rpx;

            .name {
              background: linear-gradient(to right, #FE393A 30%, #FE4434 60%, #FE4E2E 90%);
              background-clip: text;
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              font-size: 34 rpx;
              width: 200 rpx;
              font-family: 'FangZhengHanZhenGuangBiaoJianTi';
            }

            .text {
              background: linear-gradient(to right, #FE512C 30%, #FE5B26 60%, #FE6B1D 90%);
              background-clip: text;
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              font-size: 34rpx;
              font-family: 'FangZhengHanZhenGuangBiaoJianTi';
            }
          }
        }

        .shop-title-block {
          width: 100%;
          background: #fff;
          height: 100rpx;
          margin-bottom: 20rpx;
          border-radius: 20rpx;
        }

        .shop-item {
          padding: 30rpx;
        }

        .title {
          margin-left: 20rpx;
          background: -webkit-linear-gradient(45deg, #FF2F34, #FF6B18);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          display: inline-block;
          margin: 30rpx 0 0 30rpx;
        }

      }
    }
  }
}
</style>
